<template>
  <view :class="{ popupShow: popupShow }">
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="找名医" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="" style="width: 100%; height: 280rpx; background: url(https://wenzhen.jiangkukeji360.com/static/index/bg.png) no-repeat; background-size: 100% 100%">
      <view class="" style="padding: 76rpx 0 24rpx 28rpx"></view>
      <!-- 搜索 -->
      <view
        class=""
        style="
          margin: 24rpx 28rpx;
          box-shadow: 0px 0px 10rpx 0px rgba(0, 161, 255, 0.2);
          border-radius: 36rpx;
          background: #fff;
          display: flex;
          align-items: center;
          height: 72rpx;
          justify-content: space-between;
          margin-top: 80rpx;
        "
      >
        <view class="" style="display: flex; align-items: center; padding-left: 25rpx">
          <view class="">
            <image src="https://wenzhen.jiangkukeji360.com/static/index/sousuo.png" mode="" style="width: 34rpx; height: 34rpx"></image>
          </view>
          <view class="">
            <input type="text" placeholder="根据医院搜索" style="font-size: 26rpx; color: #999999; padding-left: 19rpx" v-model="value" />
          </view>
        </view>

        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <view class="" style="width: 2rpx; height: 30rpx; background: #90d1ff"></view>
          <view class="" style="font-size: 28rpx; color: #1a9fff; padding-left: 30rpx" @tap="sou">搜索</view>
        </view>
      </view>
    </view>
    <!-- 热门科室 -->
    <view class="" style="font-size: 32rpx; font-weight: bold; margin-top: -20rpx; padding-left: 30rpx" v-if="type == 0">热门科室</view>
    <!-- 科室 -->
    <view class="" style="margin: 0 28rpx" v-if="type == 2">
      <view class="" style="display: flex; align-items: center; flex-wrap: wrap; padding: 39rpx 30rpx; justify-content: space-between">
        <view class="" style="text-align: center" v-for="(i, k) in arr" :key="k">
          <image :src="'https://wenzhen.jiangkukeji360.com/static/index/m' + k + '.png'" mode="" style="width: 96rpx; height: 96rpx"></image>
          <view class="" style="font-size: 28rpx">
            {{ i.name }}
          </view>
        </view>
      </view>
      <!-- <view class="" style="display: flex;align-items: center;flex-wrap: wrap;padding: 0rpx 0  47rpx 10rpx;">
				<view class="" style="text-align: center;margin-right: 20rpx;">
					<image src="../../static/index/m5.png" mode="" style="width: 96rpx;height: 96rpx;"></image>
					<view class="" style="font-size: 28rpx;">
						儿童皮肤科
					</view>
				</view>
				<view class="" style="text-align: center;margin-right: 45rpx;">
					<image src="../../static/index/m6.png" mode="" style="width: 96rpx;height: 96rpx;"></image>
					<view class="" style="font-size: 28rpx;">
						综合科
					</view>
				</view>
				<view class="" style="text-align: center;margin-right: 0rpx;">
					<image src="../../static/index/m7.png" mode="" style="width: 96rpx;height: 96rpx;"></image>
					<view class="" style="font-size: 28rpx;">
						更多
					</view>
				</view>
			</view> -->
    </view>
    <!-- 下拉选择 -->
    <view class="" style="display: flex; align-items: center; justify-content: space-between" v-if="type == 0">
      <!-- <u-dropdown>
				<u-dropdown-item v-model="value1" title="综合" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="科室" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="地区" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value4" title="更多" :options="options1"></u-dropdown-item>
			</u-dropdown> -->
      <u-dropdown ref="uDropdown" @open="open" @close="close">
        <u-dropdown-item v-model="value1" title="综合" :options="options1" @change="change"></u-dropdown-item>

        <u-dropdown-item title="科室">
          <view class="slot-content" style="background: #fff">
            <view class="u-menu-wrap">
              <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" style="height: 800rpx">
                <view
                  v-for="(item, index) in tabbar"
                  :key="index"
                  class="u-tab-item"
                  :class="[current2 == index ? 'u-tab-item-active' : '']"
                  :data-current="index"
                  @tap.stop="swichMenu(index)"
                >
                  <text class="u-line-1">{{ item.department_name }}</text>
                </view>
              </scroll-view>
              <block v-for="(item, index) in tabbar" :key="index">
                <scroll-view scroll-y class="right-box" v-if="current2 == index" style="height: 800rpx">
                  <view class="page-view">
                    <view class="class-item">
                      <view class="item-container">
                        <view class="thumb-box" v-for="(item1, index1) in item.disease" :key="index1" @tap.stop="Submenu(item1)">
                          <view class="item-menu-name">{{ item1.disease_name }}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </block>
            </view>
          </view>
        </u-dropdown-item>

        <u-dropdown-item title="地区">
          <view class="slot-content" style="background: #fff">
            <view class="u-menu-wrap">
              <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" style="height: 800rpx">
                <view
                  v-for="(item, index) in citys"
                  :key="index"
                  class="u-tab-item"
                  :class="[current2 == index ? 'u-tab-item-active' : '']"
                  :data-current="index"
                  @tap.stop="swichMenu(index)"
                >
                  <text class="u-line-1">{{ item.name }}</text>
                </view>
              </scroll-view>
              <block v-for="(item, index) in citys" :key="index">
                <scroll-view scroll-y class="right-box" v-if="current2 == index" style="height: 800rpx">
                  <view class="page-view">
                    <view class="class-item">
                      <view class="item-container">
                        <view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1" @tap.stop="Submenu1(item1)">
                          <view class="item-menu-name">{{ item1.shortname }}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </block>
            </view>
          </view>
        </u-dropdown-item>

        <u-dropdown-item title="更多">
          <view class="slot-content" style="background: #fff">
            <view class="" style="font-size: 28rpx; padding: 28rpx">服务类型</view>
            <view class="" style="display: flex; align-items: center; padding: 0 28rpx; justify-content: space-between">
              <view :class="current == k ? 'on1' : 'on'" v-for="(i, k) in fwtype" :key="k" @tap="current = k">
                {{ i.name }}
              </view>
            </view>

            <view class="" style="font-size: 28rpx; padding: 28rpx">医生支持</view>
            <view class="" style="display: flex; align-items: center; padding: 0 28rpx; justify-content: space-between">
              <view :class="current1 == k ? 's1' : 's'" v-for="(i, k) in zhiwu" :key="k" @tap="current1 = k">
                {{ i.name }}
              </view>
            </view>
            <view class="" style="display: flex; align-items: center; justify-content: space-around; padding: 40rpx 0">
              <view class="botton" @tap="(current = '-1'), (current1 = '-1')">重置</view>
              <view class="botton1" @tap="que">确定</view>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown>

      <!-- <view class="" style="display: flex;align-items: center;">
				<view class="" style="font-size: 28rpx;">
					综合
				</view>
				<view class="" style="width: 16rpx;height: 10rpx;">
					<image src="../../static/index/down.png" mode=""
						style="width: 16rpx;height: 10rpx;padding-left: 11rpx;"></image>
				</view>
				
			</view>

			<view class="" style="display: flex;align-items: center;">
				<view class="" style="font-size: 28rpx;">
					科室
				</view>
				<image src="../../static/index/down.png" mode=""
					style="width: 16rpx;height: 10rpx;padding-left: 11rpx;"></image>
			</view>

			<view class="" style="display: flex;align-items: center;">
				<view class="" style="font-size: 28rpx;">
					地区
				</view>
				<image src="../../static/index/down.png" mode=""
					style="width: 16rpx;height: 10rpx;padding-left: 11rpx;"></image>
			</view>

			<view class="" style="display: flex;align-items: center;">
				<view class="" style="font-size: 28rpx;">
					更多
				</view>
				<image src="../../static/index/down.png" mode=""
					style="width: 16rpx;height: 10rpx;padding-left: 11rpx;"></image>
			</view> -->
    </view>
    <!-- 标签 -->
    <!-- <view class=""
			style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;padding: 0 28rpx;"
			v-if="type==0">
			<view :class="current3==k ? 't1' : 't'" v-for="(i,k) in bqlist" :key="k" @tap="current3=k">
				{{i.label_title}}
			</view>
		</view> -->
    <!-- 医生 -->
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx" v-if="type == 0" v-for="(i, k) in getlist" :key="k" @tap="gets(i.doctor_id)">
      <view class="" style="display: flex">
        <view class="" style="position: relative; margin: 43rpx 35rpx 0 30rpx">
          <image :src="i.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
          <view
            class=""
            style="
              width: 64rpx;
              height: 34rpx;
              background: #ff7251;
              border-radius: 17rpx;
              font-size: 22rpx;
              color: #fff;
              text-align: center;
              line-height: 34rpx;
              position: absolute;
              top: 89rpx;
              left: 23rpx;
            "
          >
            {{ i.level_name }}
          </view>
        </view>
        <!-- 医师信息 -->
        <view class="" style="padding-top: 50rpx">
          <view class="" style="display: flex; align-items: flex-end">
            <view class="" style="font-size: 32rpx">
              {{ i.doctor_name }}
            </view>
            <view class="" style="font-size: 26rpx; padding-left: 16rpx">
              {{ i.doctor_title }}
            </view>
          </view>

          <view class="" style="display: flex; align-items: flex-end; font-size: 26rpx; color: #666666; padding-top: 10rpx">
            <view class="">
              {{ i.department_name }}
            </view>
            <view class="" style="padding-left: 29rpx">
              {{ i.hospital_name }}
            </view>
          </view>

          <view class="" style="display: flex; align-items: center; padding-top: 10rpx">
            <view class="">
              <text style="font-size: 28rpx; color: #e50014">{{ i.score }}</text>
              <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">分</text>
            </view>
            <view class="" style="padding-left: 26rpx">
              <text style="font-size: 28rpx; color: #e50014">{{ i.evaluate_nums }}</text>
              <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">评价</text>
            </view>
            <view class="" style="padding-left: 27rpx">
              <text style="font-size: 28rpx; color: #e50014">{{ i.order_nums }}</text>
              <text style="font-size: 26rpx; color: #999999; padding-left: 9rpx">服务数</text>
            </view>
          </view>
          <view class="" style="font-size: 26rpx; color: #999999; padding-top: 15rpx; padding-right: 50rpx">擅长：{{ i.disease }}</view>
          <view class="" style="display: flex; align-items: center; margin-top: 10rpx; flex-wrap: wrap">
            <view class="btn" style="background: #ffede8; margin-right: 30rpx; margin-top: 10rpx" v-for="(m, n) in i.lable" :key="n">
              {{ m.label_title }}
            </view>
          </view>
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 33rpx 45rpx 34rpx 39rpx">
        <view class="" style="font-size: 26rpx; display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/wz.png" mode="" style="width: 34rpx; height: 34rpx"></image>
          <view class="" style="padding-left: 9rpx">问诊</view>
        </view>
        <view class="" style="font-size: 26rpx; display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/tw.png" mode="" style="width: 34rpx; height: 34rpx"></image>
          <view class="" style="padding-left: 9rpx">提问</view>
        </view>
        <view class="" style="font-size: 26rpx; display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/yuyue.png" mode="" style="width: 34rpx; height: 34rpx"></image>
          <view class="" style="padding-left: 9rpx">预约挂号</view>
        </view>
      </view>
    </view>
    <!-- 医院 -->
    <view
      class=""
      style="margin: 28rpx; background: #fff; border-radius: 20rpx; display: flex; align-items: flex-end; justify-content: space-between"
      v-for="(i, k) in list"
      :key="k"
      v-if="type == 1"
      @tap="put(i.id)"
    >
      <view class="" style="display: flex; align-items: center; padding: 29rpx 0 29rpx 23rpx">
        <image :src="img_url + i.hospital_image" mode="aspectFill" style="width: 160rpx; height: 160rpx; border-radius: 12rpx"></image>
        <view class="" style="padding-left: 25rpx">
          <view class="" style="font-size: 30rpx">
            {{ i.hospital_name }}
          </view>
          <view class="" style="font-size: 26rpx; margin-top: 15rpx">
            <text style="color: #ff5831; padding-right: 20rpx">{{ i.doctor_num }}位</text>
            <text>医生</text>
          </view>
          <!-- 三甲 -->
          <view class="" style="display: flex; align-items: center; margin-top: 20rpx">
            <view
              class=""
              style="
                font-size: 22rpx;
                color: #ff7252;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90rpx;
                height: 36rpx;
                background: #ffe2db;
                border-radius: 18rpx;
              "
            >
              <image src="https://wenzhen.jiangkukeji360.com/static/index/homes.png" mode="" style="width: 24rpx; height: 24rpx"></image>
              <view class="" style="padding-left: 2rpx">
                {{ i.level_name }}
              </view>
            </view>
            <view
              class=""
              style="
                font-size: 22rpx;
                color: #1a9eff;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90rpx;
                height: 36rpx;
                background: #e4f4ff;
                border-radius: 18rpx;
                margin-left: 20rpx;
              "
            >
              <image src="https://wenzhen.jiangkukeji360.com/static/index/home.png" mode="" style="width: 24rpx; height: 24rpx"></image>
              <view class="" style="padding-left: 2rpx">
                {{ i.classify_text }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 去挂号 -->
      <view class="" style="padding-right: 10rpx">
        <view class="">
          <u-icon name="map" color="#666666" :label="i.distance"></u-icon>
        </view>
        <view class="" style="font-size: 24rpx; color: #1a9eff; text-align: right; margin-top: 25rpx; margin-bottom: 40rpx">去挂号》</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '皮肤科'
        },
        {
          name: '激光科'
        },
        {
          name: '疤痕科'
        },
        {
          name: '毛发科'
        },
        {
          name: '烧烫伤科'
        }
      ],
      arr1: [
        {
          name: '儿童皮肤科'
        },
        {
          name: '综合科'
        },
        {
          name: '更多'
        }
      ],
      type: 1,
      page: 1,
      list: [],
      value1: 1,
      options1: [
        {
          label: '综合排序',
          value: 1
        },
        {
          label: '好评优先',
          value: 2
        }
      ],
      value2: 1,
      value3: 1,
      value4: 1,
      fwtype: [
        {
          name: '问诊',
          id: 1
        },
        {
          name: '提问',
          id: 2
        },
        {
          name: '挂号',
          id: 3
        },
        {
          name: '不限',
          id: 4
        }
      ],
      zhiwu: [
        {
          name: '主任',
          id: 1
        },
        {
          name: '副主任及以上',
          id: 2
        },
        {
          name: '主治及以上',
          id: 3
        }
      ],
      current: '-1',
      current1: '-1',
      tabbar: [],
      scrollTop: 0, //tab标题的滚动条位置
      current2: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      citys: [],
      bqlist: [],
      current3: 0,
      page1: 1,
      show: false,
      getlist: [],
      value: '',
      sort_type: null,
      disease_id: '',
      citys1: '',
      popupShow: false
    };
  },
  methods: {
    close() {
      this.popupShow = false;
    },
    open() {
      this.popupShow = true;
      console.log('0000');
      // @touchmove.stop.prevent="moveHandle"
    },
    moveHandle() {},
    que() {
      this.page1 = 1;
      this.api({
        url: '/api//doctor/getList',
        method: 'post',
        data: {
          page: this.page1,
          serve_id: this.current + 1,
          title_id: this.current1 + 1
        }
      }).then((res) => {
        this.getlist = res.data;
      });
      this.$refs.uDropdown.close();
    },
    Submenu1(e) {
      console.log(e);
      this.citys1 = e.name;
      this.doctor(1);
      this.$refs.uDropdown.close();
    },
    Submenu(e) {
      console.log(e);
      this.disease_id = e.disease_id;
      this.doctor(1);
      this.$refs.uDropdown.close();
    },
    change(e) {
      console.log(e);
      this.sort_type = e;
      this.doctor(1);
    },
    sech() {
      if (this.type == 1) {
        this.hospital(1);
      } else {
        this.doctor(1);
      }
    },
    bq() {
      this.api({
        url: '/api/common/label',
        method: 'post'
      }).then((res) => {
        this.bqlist = res.data;
        this.doctor();
      });
    },
    getImg() {
      return Math.floor(Math.random() * 35);
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (index == this.current2) return;
      this.current2 = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight');
        await this.getElRect('u-tab-item', 'menuItemHeight');
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.' + elClass)
          .fields(
            {
              size: true
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
            }
          )
          .exec();
      });
    },
    put(e) {
      uni.navigateTo({
        url: '/hospital/hospital/hospital?id=' + e
      });
    },
    gets(e) {
      uni.navigateTo({
        url: '/doctor/doctor/doctor?id=' + e
      });
    },
    hospital(e) {
      console.log('调接口了吗------',e);
      if (e == 1) {
        this.list = [];
        this.page = 1;
      }
      uni.getLocation({
        success: (data) => {
          console.log('选择位置', data);
          this.api({
            url: '/api/common/hospitalList',
            method: 'post',
            data: {
              page: this.page,
              long: data.longitude,
              lat: data.latitude,
              search: this.value
            }
          }).then((res) => {
            this.list = this.list.concat(res.data);
            this.page++;
          });
        },
        fail: (e) => {
          // uni.showModal({
          //   title: '提示',
          //   content: '获取定位失败，是否授权打开定位',
          //   success: (res) => {
          // if (res.confirm) {
          //   uni.getSystemInfo({
          //     success: (sys) => {
          //       if (sys.platform == 'ios') {
          //         plus.runtime.openURL('app-settings://');
          //       } else {
          //         var main = plus.android.runtimeMainActivity();
          //         var Intent = plus.android.importClass('android.content.Intent');
          //         //可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
          //         var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
          //         main.startActivity(mIntent);
          //       }
          //     }
          //   });
          // }
          // }
          // });
        }
      });
    },
    keshi() {
      this.api({
        url: '/api/doctor/departmentDisease',
        method: 'post'
      }).then((res) => {
        this.tabbar = res.data;
      });
    },
    city() {
      this.api({
        url: '/api/index/getAreaList',
        method: 'post'
      }).then((res) => {
        this.citys = res.data;
      });
    },
    doctor(e) {
      if (e == 1) {
        this.getlist = [];
        this.page1 = 1;
      }
      console.log(this.bqlist);

      this.api({
        url: '/api//doctor/getList',
        method: 'post',
        data: {
          page: this.page1,
          sort_type: this.value1,
          serve_id: '',
          title_id: '',
          name: this.value,
          sort_type: this.sort_type,
          label_id: this.bqlist[this.current3].label_id,
          disease_id: this.disease_id,
          city: this.citys1
        }
      }).then((res) => {
        this.getlist = this.getlist.concat(res.data);
        this.page1++;
      });
    },
    sou() {
		console.log('aaaaaaaaaaa');
      this.page1 = 1;
      if (this.type == 1) {
        this.hospital(1);
      } else {
        this.api({
          url: '/api//doctor/getList',
          method: 'post',
          data: {
            page: this.page1,
            sort_type: this.value1,
            serve_id: '',
            title_id: '',
            name: this.value
          }
        }).then((res) => {
          this.getlist = res.data;
        }).catch((err)=>{
			console.log('请求失败',err);
		})
      }
    }
  },
  onLoad(op) {
    this.type = op.type;
    this.hospital(1);
    this.keshi();
    this.city();
    this.bq();
  },
  onShow() {}
};
</script>

<style lang="scss" scoped>
.popupShow {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
}

.t {
  padding: 14rpx 17rpx;
  border-radius: 25rpx;
  background: #f0f0f0;
  color: #666;
  font-size: 24rpx;
}

.t1 {
  padding: 14rpx 17rpx;
  border-radius: 25rpx;
  background: #e6f4ff;
  color: #1a9eff;
  font-size: 24rpx;
}

page {
  background: #f8f8f8;
}

.btn {
  width: 140rpx;
  height: 41rpx;
  background: #fff1e5;
  border-radius: 4rpx;
  text-align: center;
  line-height: 41rpx;
  font-size: 24rpx;
  color: #ff801e;
}

.on {
  width: 150rpx;
  height: 60rpx;
  background: #f0f0f0;
  border-radius: 30rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #666;
}

.on1 {
  width: 150rpx;
  height: 60rpx;
  background: #1a9eff;
  border-radius: 30rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #fff;
}

.s {
  background: #f0f0f0;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666666;
  padding: 17rpx 48rpx;
}

.s1 {
  background: #1a9eff;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #fff;
  padding: 17rpx 48rpx;
}

.botton {
  width: 250rpx;
  height: 74rpx;
  border: 1rpx solid #cccccc;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  color: #666666;
  font-size: 28rpx;
}

.botton1 {
  width: 250rpx;
  height: 74rpx;
  background: #1a9eff;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  color: #fff;
  font-size: 28rpx;
}

.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}

.u-search-box {
  padding: 18rpx 30rpx;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-search-inner {
  background-color: rgb(234, 234, 234);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
}

.u-search-text {
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.u-tab-view {
  width: 280rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #666666;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #1c96d5;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: '';
  position: absolute;
  border-left: 4px solid #2d81ff;
  height: 32rpx;
  border-radius: 4rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 16rpx;
}

.class-item {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 30rpx;
  color: #222222;
}

// .item-container {
// 	display: flex;
// 	flex-wrap: wrap;
// }

.thumb-box {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 51rpx;

  // width: 33.333333%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-direction: column;
  // margin-top: 20rpx;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}
</style>
